//
// DISCLAIMER:
// Do not change this file because it is core styling.
// Customizing core files will make updating Atlas much more difficult in the future.
// To customize any core styling, copy the part you want to customize to styles/web/sass/app/ so the core styling is overwritten.
//

@mixin navigation-tree-helpers() {
    /* ==========================================================================
       Navigation

    //== Regions
    //## Behavior in the different regions
    ========================================================================== */
    // When used in topbar
    .region-topbar {
        .mx-navigationtree {
            background-color: $navtopbar-bg;
            .navbar-inner > ul {
                & > li {
                    & > a {
                        color: $navtopbar-color;
                        border-color: $navtopbar-border-color;
                        background-color: $navtopbar-bg;
                        font-size: $navtopbar-font-size;
                        .caret {
                            border-top-color: $navtopbar-color;
                            border-bottom-color: $navtopbar-color;
                        }

                        .glyphicon,
                        .mx-icon-lined,
                        .mx-icon-filled {
                            font-size: $navtopbar-glyph-size;
                        }
                    }
                    a:hover,
                    a:focus,
                    a.active {
                        color: $navtopbar-color-hover;
                        background-color: $navtopbar-bg-hover;
                        .caret {
                            border-top-color: $navtopbar-color-active;
                            border-bottom-color: $navtopbar-color-active;
                        }
                    }
                    a.active {
                        color: $navtopbar-color-active;
                        border-left-color: $navtopbar-color-active;
                        background-color: $navtopbar-bg-active;
                    }
                }
            }

            /* Sub navigation item specific */
            li.mx-navigationtree-has-items {
                & > ul {
                    background-color: $navtopbar-sub-bg;
                    li {
                        a {
                            color: $navtopbar-sub-color;
                            background-color: $navtopbar-sub-bg;
                            font-size: $navtopbar-sub-font-size;
                            &:hover,
                            &:focus,
                            &.active {
                                color: $navtopbar-sub-color-hover;
                                background-color: $navtopbar-sub-bg-hover;
                            }
                            &.active {
                                color: $navtopbar-sub-color-active;
                                background-color: $navtopbar-sub-bg-active;
                            }
                        }
                    }
                }
            }
        }
    }

    // When used in sidebar
    .region-sidebar {
        .mx-navigationtree {
            background-color: $navsidebar-bg;
            .navbar-inner > ul {
                & > li {
                    & > a {
                        color: $navsidebar-color;
                        border-color: $navsidebar-border-color;
                        background-color: $navsidebar-bg;
                        font-size: $navsidebar-font-size;
                        .caret {
                            border-top-color: $navsidebar-color;
                            border-bottom-color: $navsidebar-color;
                        }

                        .glyphicon,
                        .mx-icon-lined,
                        .mx-icon-filled {
                            font-size: $navsidebar-glyph-size;
                        }
                    }
                    a:hover,
                    a:focus,
                    a.active {
                        color: $navsidebar-color-hover;
                        background-color: $navsidebar-bg-hover;
                        .caret {
                            border-top-color: $navsidebar-color-active;
                            border-bottom-color: $navsidebar-color-active;
                        }
                    }
                    a.active {
                        color: $navsidebar-color-active;
                        border-left-color: $navsidebar-color-active;
                        background-color: $navsidebar-bg-active;
                    }
                }
            }

            /* Sub navigation item specific */
            li.mx-navigationtree-has-items {
                & > ul {
                    background-color: $navsidebar-sub-bg;
                    li {
                        a {
                            color: $navsidebar-sub-color;
                            background-color: $navsidebar-sub-bg;
                            font-size: $navsidebar-sub-font-size;
                            &:hover,
                            &:focus,
                            &.active {
                                color: $navsidebar-sub-color-hover;
                                background-color: $navsidebar-sub-bg-hover;
                            }
                            &.active {
                                color: $navsidebar-sub-color-active;
                                background-color: $navsidebar-sub-bg-active;
                            }
                        }
                    }
                }
            }
        }
    }

    //== Design Properties
    //## Helper classes to change the look and feel of the component
    //-------------------------------------------------------------------------------------------------------------------//
    // Content Centerd text and icons
    .nav-content-center-text-icons.mx-navigationtree {
        .navbar-inner ul {
            a {
                flex-direction: column;
                justify-content: center;
                .glyphicon,
                .mx-icon-lined,
                .mx-icon-filled {
                    margin: 0 0 5px 0;
                }
            }
        }
    }

    // Content Centerd icons only
    .nav-content-center.mx-navigationtree {
        .navbar-inner ul {
            a {
                justify-content: center;
            }
        }
    }

    .hide-icons.mx-navigationtree {
        .glyphicon,
        .mx-icon-lined,
        .mx-icon-filled {
            display: none;
        }
    }
}
